<template>
	<view class="bg-random">
		<view class="main " v-if="true" :style="{
			'background':props.gloss? `conic-gradient(from ${degree}, ${colorMain}, transparent, ${colorSub}, transparent, ${colorMain})`:'#FFFFFF00',
			
		}">
			<slot></slot>
		</view>
		<view class="before " v-if="true" :style="{
		 		'background': `linear-gradient( ${degree}, ${colorMain}, ${colorSub})`,
				'mask': `linear-gradient(135deg, #fff ${size}, transparent 0),linear-gradient(-135deg, #fff ${size}, transparent 0),linear-gradient(45deg, #fff ${size}, transparent 0),linear-gradient(-45deg, #fff ${size}, transparent 0),linear-gradient(135deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(-135deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(45deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(-45deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(135deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(-135deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(45deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(-45deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0)`,
				'-webkit-mask': `linear-gradient(135deg, #fff ${size}, transparent 0),linear-gradient(-135deg, #fff ${size}, transparent 0),linear-gradient(45deg, #fff ${size}, transparent 0),linear-gradient(-45deg, #fff ${size}, transparent 0),linear-gradient(135deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(-135deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(45deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(-45deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(135deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(-135deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(45deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(-45deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0)`,
				'-webkit-mask-image': `linear-gradient(135deg, #fff ${size}, transparent 0),linear-gradient(-135deg, #fff ${size}, transparent 0),linear-gradient(45deg, #fff ${size}, transparent 0),linear-gradient(-45deg, #fff ${size}, transparent 0),linear-gradient(135deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(-135deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(45deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(-45deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(135deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(-135deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(45deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(-45deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0)`,
				'-webkit-mask-box-image': `linear-gradient(135deg, #fff ${size}, transparent 0),linear-gradient(-135deg, #fff ${size}, transparent 0),linear-gradient(45deg, #fff ${size}, transparent 0),linear-gradient(-45deg, #fff ${size}, transparent 0),linear-gradient(135deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(-135deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(45deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(-45deg, #fff calc(${percentage} + ${size}), transparent 0),linear-gradient(135deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(-135deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(45deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0),linear-gradient(-45deg, #fff calc(${percentage} + ${percentage} + ${size}), transparent 0)`,
				'mask-size': `${maskSize} ${maskSize}`,
				'-webkit-mask-size': `${maskSize} ${maskSize}`,
				'display': 'block',
				'mask-position': '50% 50%',
				'-webkit-mask-position': '50% 50%',
				'-webkit-mask-composite': 'xor',
				'background-position-x': 'initial',
				'background-position-y': 'initial',
				'background-size': 'initial',
				'background-repeat-x': 'initial',
				'background-repeat-y': 'initial',
				'background-attachment': 'initial',
				'background-origin': 'initial',
				'background-clip': 'initial',
				'background-color': 'initial',
				'-webkit-mask-repeat-x': 'initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial',
				'-webkit-mask-repeat-y': 'initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial',
				'-webkit-mask-origin': 'initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial',
				'-webkit-mask-clip': 'initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial',
				'-webkit-mask-position-x': '50%',
				'-webkit-mask-position-y': '50%',
		 	}">

		</view>
		<view class="after" v-if="false" :style="{
		 		'background': `repeating-linear-gradient(${colorMain} 0px, ${colorSub} 20px)`,
				'mask':`linear-gradient(135deg, #fff ${smallSizea}, transparent 0),linear-gradient(-135deg, #fff ${smallSizea}, transparent 0),linear-gradient(45deg, #fff ${smallSizea}, transparent 0),linear-gradient(-45deg, #fff ${smallSizea}, transparent 0),linear-gradient(135deg, #fff ${sizea}, transparent 0),linear-gradient(-135deg, #fff ${sizea}, transparent 0),linear-gradient(45deg, #fff ${sizea}, transparent 0),linear-gradient(-45deg, #fff ${sizea}, transparent 0)`,
				'-webkit-mask':`linear-gradient(135deg, #fff ${smallSizea}, transparent 0),linear-gradient(-135deg, #fff ${smallSizea}, transparent 0),linear-gradient(45deg, #fff ${smallSizea}, transparent 0),linear-gradient(-45deg, #fff ${smallSizea}, transparent 0),linear-gradient(135deg, #fff ${sizea}, transparent 0),linear-gradient(-135deg, #fff ${sizea}, transparent 0),linear-gradient(45deg, #fff ${sizea}, transparent 0),linear-gradient(-45deg, #fff ${sizea}, transparent 0)`,
				'-webkit-mask-image':`linear-gradient(135deg, #fff ${smallSizea}, transparent 0),linear-gradient(-135deg, #fff ${smallSizea}, transparent 0),linear-gradient(45deg, #fff ${smallSizea}, transparent 0),linear-gradient(-45deg, #fff ${smallSizea}, transparent 0),linear-gradient(135deg, #fff ${sizea}, transparent 0),linear-gradient(-135deg, #fff ${sizea}, transparent 0),linear-gradient(45deg, #fff ${sizea}, transparent 0),linear-gradient(-45deg, #fff ${sizea}, transparent 0)`,
				'-webkit-mask-box-image':`linear-gradient(135deg, #fff ${smallSizea}, transparent 0),linear-gradient(-135deg, #fff ${smallSizea}, transparent 0),linear-gradient(45deg, #fff ${smallSizea}, transparent 0),linear-gradient(-45deg, #fff ${smallSizea}, transparent 0),linear-gradient(135deg, #fff ${sizea}, transparent 0),linear-gradient(-135deg, #fff ${sizea}, transparent 0),linear-gradient(45deg, #fff ${sizea}, transparent 0),linear-gradient(-45deg, #fff ${sizea}, transparent 0)`,
				'mask-size': `${maskSizea} ${maskSizea}`,
				'-webkit-mask-size': `${maskSize} ${maskSize}`,
				'display': 'block',
				'mask-position': '50% 50%',
				'-webkit-mask-position': '50% 50%',
				'-webkit-mask-composite': 'xor',
				'background-position-x': 'initial',
				'background-position-y': 'initial',
				'background-size': 'initial',
				'background-repeat-x': 'initial',
				'background-repeat-y': 'initial',
				'background-attachment': 'initial',
				'background-origin': 'initial',
				'background-clip': 'initial',
				'background-color': 'initial',
				'-webkit-mask-repeat-x': 'initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial',
				'-webkit-mask-repeat-y': 'initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial',
				'-webkit-mask-origin': 'initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial',
				'-webkit-mask-clip': 'initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial',
				'-webkit-mask-position-x': '50%',
				'-webkit-mask-position-y': '50%',
		 	}">

		</view>
	</view>
</template>

<script setup>
	import {
		ref,onMounted,defineEmits
	} from 'vue'
	
	const props = defineProps({
	 
	  gloss: {
	 
	    type: Boolean,
	 
	    default: false,
	 
	  },
	  custom :{
	 
	    type: Boolean,
	 
	    default: false,
	 
	  },
	  index :{
	  	 
	    type: Number,
	  	 
	    default: 0,
	  	 
	  },
	  
	 
	});
	// const emit = defineEmits(["customColor"]);
	
	const getRandom = (min, max) => {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	onMounted(()=>{
		
	})
	//after盒
	const smallSizea = ref(`${getRandom(1,5)}px`)
	const sizea = ref(`${getRandom(5,12)}px`)
	const maskSizea = ref(`${getRandom(20,60)}px`)

	// before盒
	const size = ref(`${getRandom(2,15)}px`)
	const maskSize = ref(`${getRandom(10,75)}px`)
	const percentage = ref(`${getRandom(10,30)}%`)
	// 大盒
	const degree = ref(`${getRandom(0,360)}deg`)
	const colorMain = ref(`rgb(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)})`)
	const colorSub = ref(`rgb(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)})`)
	const colorThird = ref(`rgb(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)})`)
	let config_custom = uni.getStorageSync('color_config_custom')
	if(config_custom){
		smallSizea.value = config_custom.smallSizea
		sizea.value = config_custom.sizea
		maskSizea.value = config_custom.maskSizea
		size.value = config_custom.size
		maskSize.value = config_custom.maskSize
		percentage.value = config_custom.percentage
		degree.value = config_custom.degree
		colorMain.value = config_custom.colorMain
		colorSub.value = config_custom.colorSub
		colorThird.value = config_custom.colorThird
	}else{
		if(props.custom){
			let arr = uni.getStorageSync('color_config')
			smallSizea.value = arr[props.index].smallSizea
			sizea.value = arr[props.index].sizea
			maskSizea.value = arr[props.index].maskSizea
			size.value = arr[props.index].size
			maskSize.value = arr[props.index].maskSize
			percentage.value = arr[props.index].percentage
			degree.value = arr[props.index].degree
			colorMain.value = arr[props.index].colorMain
			colorSub.value = arr[props.index].colorSub
			colorThird.value = arr[props.index].colorThird
		}
	}
	
	const save =()=>{
		let arr = uni.getStorageSync('color_config')
		if(arr){
			arr.push({
				smallSizea: smallSizea.value,
				sizea: sizea.value,
				maskSizea: maskSizea.value,
				size: size.value,
				maskSize: maskSize.value,
				percentage: percentage.value,
				degree: degree.value,
				colorMain: colorMain.value,
				colorSub: colorSub.value,
				colorThird: colorThird.value,
			})
			uni.setStorageSync('color_config',arr)
		}else{
			arr = []
			arr.push({
				smallSizea: smallSizea.value,
				sizea: sizea.value,
				maskSizea: maskSizea.value,
				size: size.value,
				maskSize: maskSize.value,
				percentage: percentage.value,
				degree: degree.value,
				colorMain: colorMain.value,
				colorSub: colorSub.value,
				colorThird: colorThird.value,
			})
			uni.setStorageSync('color_config',arr)
		}
		
		return new Promise((resolve,reject)=>{
			resolve()
		})
	}
	const init =()=>{
		 smallSizea.value = `${getRandom(1,5)}px`
		 sizea.value = `${getRandom(5,12)}px`
		 maskSizea.value = `${getRandom(20,60)}px`
		
		// before盒
		// $size: random(13px)+2px;
		// $maskSize: random(65px)+10px;
		// $percentage: random(20%)+10%; //% 差个百分比
		 size.value = `${getRandom(2,15)}px`
		 maskSize.value = `${getRandom(10,75)}px`
		 percentage.value = `${getRandom(10,30)}%`
		// 大盒
		 degree.value = `${getRandom(0,360)}deg`
		 colorMain.value = `rgb(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)})`
		 colorSub.value = `rgb(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)})`
		 colorThird.value = `rgb(${getRandom(0,255)},${getRandom(0,255)},${getRandom(0,255)})`
	}
	
	// 重点：此处一点要对外暴露 不然外部无法使用，当做是js的module的export即可
	defineExpose({ init,save });
</script>

<style lang="scss" scoped>
	.before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		
	}

	.after {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		mask-position: 50% 50%;
		display: block;
		mask-position: 50% 50%;
		-webkit-mask-position: 50% 50%;
		-webkit-mask-composite: xor;
		background-position-x: initial;
		background-position-y: initial;
		background-size: initial;
		background-repeat-x: initial;
		background-repeat-y: initial;
		background-attachment: initial;
		background-origin: initial;
		background-clip: initial;
		background-color: initial;
		-webkit-mask-repeat-x: initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial;
		-webkit-mask-repeat-y: initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial;
		-webkit-mask-origin: initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial;
		-webkit-mask-clip: initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial, initial;
		-webkit-mask-position-x: 50%;
		-webkit-mask-position-y: 50%;
	}

	.main {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}

	.bg-random {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		

	}
</style>